<template>
    <!--        新增编辑弹框-->
    <CommonModal v-model="state.visible" @handleOk="handleOk" @handleCancel="handleCancel" :title="state.modalTitle"
        :width="500">
        <!-- @validate="handleValidate" -->
        <a-form class="form_box" ref="formRef" name="custom-validation" :model="formState" :rules="rules"
            v-bind="layout">

            <a-form-item has-feedback label="上级菜单" name="parentId" :colon="false">
                <!-- {{ formState.parentId }} -->
                  <!-- :disabled="state.modalTitle == '编辑菜单'"  -->
                <a-tree-select v-model:value="formState.parentId" show-search optionFilterProp="label"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" allow-clear
                    tree-default-expand-all :tree-data="pidArr" :field-names="{
                        children: 'childrenList',
                        label: 'name',
                        value: 'id',
                    }" tree-node-filter-prop="name" @select="pidselect"></a-tree-select>
            </a-form-item>
            <a-form-item has-feedback label="菜单名称" name="name" :colon="false">
                <a-input v-model:value="formState.name" autocomplete="off" />
            </a-form-item>

            <a-form-item label="菜单类型" name="type" :colon="false">
                <!-- {{ formState.type }} -->
                <a-radio-group v-model:value="formState.type">
                    <a-radio :value="item.value" v-for="(item, index) in menuTypeList" :key="index">{{ item.label}}</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item has-feedback label="请求地址" name="content" :colon="false">
                <a-input v-model:value="formState.content" autocomplete="off" />
            </a-form-item>
            <a-form-item has-feedback label="权限标识" name="permission" :colon="false">
                <a-input v-model:value="formState.permission" autocomplete="off" />
            </a-form-item>
            <a-form-item label="是否外链" name="isOutLink" :colon="false">
                <a-radio-group v-model:value="formState.isOutLink">
                    <a-radio :value="true">是</a-radio>
                    <a-radio :value="false">否</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="归属分类" name="groupId" :colon="false"  v-if="formState.type === 'module'">
                <a-select v-model:value="formState.groupId" show-search optionFilterProp="label">
                    <!-- <a-select-option value="item.code">数据分析</a-select-option> -->
                    <a-select-option :value="item.code" :label="item.name" 
                        v-for="(item,index) in state.layerList" :key="index">
                        {{ item.name }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="目录说明" name="remark" :colon="false">
                <a-textarea :maxlength="20" v-model:value="formState.remark" />
            </a-form-item>
            <a-form-item v-if="formState.type === 'module'" has-feedback label="功能图标" name="icon" :colon="false">
                <!-- <Upload :icon="formState.icon" @success="changeIcon"></Upload> -->
                <SQuploadFile :maxCount = "1"
                    :files="formState.icon"
 
                    @updateFiles="changeIcon"
                    @change="changeIcon" >
                </SQuploadFile>
            </a-form-item>
            <a-form-item has-feedback label="显示排序" name="displayIndex" :colon="false">
                <a-input v-model:value="formState.displayIndex" autocomplete="off" />
            </a-form-item>
            <a-form-item label="菜单状态" name="isActive" :colon="false">
                <a-radio-group v-model:value="formState.isActive">
                    <a-radio :value="true">显示</a-radio>
                    <a-radio :value="false">隐藏</a-radio>
                </a-radio-group>
            </a-form-item>
        </a-form>
    </CommonModal>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { sysResourceAdd, sysResourceUpdate } from "@/service/api";
import { message } from "ant-design-vue";
import { mapDict } from "@/utils/index.js";
// import Upload from "./upload.vue"
const props = defineProps({
    // 上级菜单数据
    pidArr: {
        default: () => [],
        type: Array
    },
    // platformTypeList: {
    //     default: ()=>[],
    //     type: Array
    // },
    menuTypeList: {
        default: () => [],
        type: Array
    }
})

const state = reactive({
    visible: false,
    modalTitle: '',
    layerList: [],
    options: []
})
const emit = defineEmits(['success'])
const formRef = ref();

// 新增编辑数据
const defaultFormState = {
    id: '',
    parentId: '',
    // superiorMenu: '',
    name: '',
    type: 'module',  //菜单类型 module 目录 menu 菜单 button 按钮
    content: '',  //url地址
    permission: '',  //权限标识
    displayIndex: '',
    isActive: true,  //显示 隐藏
    isOutLink: false,
    moduleId: '',   //目录所属目录id
    icon: '',
    groupId: '',
    remark: ''
    // platform_type: '1',  //平台手机
    // menu_icon: ''
}
let formState = reactive({
    ...defaultFormState
})
const rules = {
    name: [{ required: true, max: 10 }],
    isOutLink: [{ required: true }],
    displayIndex: [{ required: true }],
    type: [{ required: true }],
    isActive: [{ required: true }]
};
const layout = {
    labelCol: {
        span: 5
    },
    wrapperCol: {
        span: 12,
    },
};
onMounted(() => {
    state.layerList = mapDict(['layerPage'])
    console.log(state.layerList, 'state.layerList');

})
const changeIcon = (icon) => {
    formState.icon = icon
}
// 更换上级菜单
const pidselect = (value, node, extra) => {
    console.log('pidChange--e', value, node);
    formState.moduleId = node.moduleId || ''
}
const handleOk = () => {
    formRef.value.validateFields().then(res => {
        let axiosFN = formState.id ? sysResourceUpdate : sysResourceAdd;
        let $data = {
            ...formState,
            parentId: formState.parentId ? formState.parentId : "0"
        }

        axiosFN($data).then(res => {
            if (res.result) {

                // formRef.value.resetFields()

                message.success(formState.id ? '编辑成功' : '添加成功');
                formRef.value.resetFields()
                formState = reactive({ ...defaultFormState })
                state.visible = false;
                emit('success');
            }
        })
        // if(!formState.id) {
        //     menuAdd(formState).then(r=>{
        //         if(r.success){
        //             state.visible = false
        //             formRef.value.resetFields()
        //             message.success('添加成功')
        //             emit('success', formState.platform_type)
        //         }else {
        //             message.warning(r.msg)
        //         }
        //     })
        // }else{
        //     menuEdit(formState).then(r=>{
        //         if(r.success){
        //             state.visible = false
        //             formRef.value.resetFields()
        //             message.success('编辑成功')
        //             emit('success', formState.platform_type)
        //         }else {
        //             message.warning(r.msg)
        //         }
        //     })
        // }
        return true
    }).catch(err => {
        message.error('字段验证不通过')
    })
}
const handleCancel = () => {
    formRef.value.resetFields()
    formState = reactive({ ...defaultFormState })
}
// const handleValidate = (...args) => {
//     console.log(args);
// };
// 修改图标
// const changeIcon = (icon) => {
//     formState.menu_icon = icon
// }
const showModal = (obj) => {
    state.visible = true;
    state.modalTitle = obj.title;
    if (obj.id) {
        Object.keys(formState).forEach(item => {
            formState[item] = obj[item]
        })
    }
    if (obj.parentId) {
        formState.parentId = obj.parentId === '0' ? '' : obj.parentId
    }
    // formState.platform_type = obj.platform_type
}
defineExpose({ showModal })
</script>
<style scoped lang="less">
.form_box {

    input,
    :deep(.JManage-select-selector) {
        // width: 250px!important;
        height: 32px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #E0E0E0;
    }

    // input修改宽度要修改这个 不然验证图标不对
    :deep(.JManage-form-item-control-input) {
        width: 250px;
    }

    .JManage-radio-group {
        //width: 300px;
    }
}
</style>
